<template>
  <div class="container">
    <!-- 入库单基本信息 -->
    <el-card class="card">
      <h3 class="section-title">入库单基本信息</h3>
      <el-form :model="form" label-width="100px" :rules="rules" class="demo-form">
        <div class="form-row">
          <div class="form-col">
            <el-form-item label="入库单号" prop="code">
              <el-input v-model="form.code" placeholder="RK02279441" clearable />
            </el-form-item>
            <el-form-item label="仓库" prop="warehouse">
              <el-select v-model="form.warehouse" placeholder="请选择仓库" clearable>
                <el-option label="上海仓库" value="sh" />
                <el-option label="北京仓库" value="bj" />
              </el-select>
            </el-form-item>
            <el-form-item label="入库类型">
              <el-radio-group v-model="form.inboundType">
                <el-radio label="生产入库" />
                <el-radio label="采购入库" />
                <el-radio label="退货入库" />
                <el-radio label="归还入库" />
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-col">
            <el-form-item label="总数量">
              <el-input :value="totalQuantity" readonly />
            </el-form-item>
            <el-form-item label="供应商">
              <el-select v-model="form.supplier" placeholder="请选择供应商" clearable>
                <el-option label="供应商A" value="a" />
                <el-option label="供应商B" value="b" />
              </el-select>
            </el-form-item>
            <el-form-item label="业务单号">
              <el-input v-model="form.businessNo" placeholder="请输入业务单号" />
            </el-form-item>
          </div>
        </div>
        
        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="备注..100个字符以内"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item label="总金额">
          <div class="total-amount">¥ {{ totalAmount.toFixed(2) }}</div>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 商品明细 -->
    <el-card class="card">
      <div class="header-row">
        <h3 class="section-title">商品明细</h3>
        <el-button type="primary" @click="openDrawer" icon="Plus">添加商品</el-button>
      </div>
      
      <el-table :data="goodsList" class="goods-table">
        <el-table-column prop="name" label="商品信息" />
        <el-table-column prop="spec" label="规格信息" />
        <el-table-column prop="quantity" label="数量" width="120" />
        <el-table-column prop="amount" label="金额" width="120" />
        <el-table-column label="操作" width="80">
          <template #default>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <div class="empty-text">暂无商品明细</div>
        </template>
      </el-table>
    </el-card>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="primary" size="large">完成入库</el-button>
      <el-button type="info" size="large">暂存</el-button>
      <el-button size="large">取消</el-button>
    </div>
  </div>

  <el-drawer
    v-model="drawerVisible"
    title="商品选择"
    direction="rtl"
    size="60%"
    class="goods-drawer"
  >
    <div class="drawer-content">
      <!-- 优化后的搜索栏部分 -->
<div class="search-bar">
  <el-row :gutter="12">
    <el-col :span="6" >
      <el-input
        v-model="searchParams.name"
        placeholder="商品名称"
        clearable
        class="search-input"
      />
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="searchParams.code"
        placeholder="商品编号"
        label="商品编号"
        clearable
        class="search-input"
      />
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="searchParams.specName"
        placeholder="规格名称"
        label="规格名称"
        clearable
        class="search-input"
      />
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="searchParams.specCode"
        placeholder="规格编号"
        label="规格编号"
        clearable
        class="search-input"
      />
    </el-col>
  </el-row>
  <div class="search-actions">
    <el-button 
      type="primary" 
      icon="Search"
      class="search-btn"
    >
      查询
    </el-button>
  </div>
</div>

      <!-- 商品表格 -->
      <el-table
        :data="filteredGoods"
        border
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="商品信息" min-width="200">
          <template #default="{ row }">
            <div class="goods-info">
              <div class="name">{{ row.name }}</div>
              <div class="brand" v-if="row.brand">品牌：{{ row.brand }}</div>
              <div class="code">编号：{{ row.code }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格信息" min-width="180">
          <template #default="{ row }">
            <div class="spec-info">
              <div>{{ row.specName }}（{{ row.specCode }}）</div>
              <div class="barcode" v-if="row.barcode">条码：{{ row.barcode }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格(元)" width="130" align="right">
          <template #default="{ row }">
            <span class="price">¥{{ row.price.toFixed(2) }}</span>
            <div class="cost-price">成本价：{{ row.costPrice?.toFixed(2) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="重量(kg)" width="120" align="right">
          <template #default="{ row }">
            <div>净重：{{ row.netWeight }}</div>
            <div>毛重：{{ row.grossWeight }}</div>
          </template>
        </el-table-column>
        <el-table-column label="长宽高(cm)" width="140" align="right">
          <template #default="{ row }">
            <div v-if="row.dimensions">
              {{ row.dimensions.length }}×{{ row.dimensions.width }}×{{ row.dimensions.height }}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.current"
          :page-size="pagination.size"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50]"
        >
          <template #default>
            <span class="pagination-text">共21条</span>
          </template>
        </el-pagination>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <div class="left-buttons">
          <el-button type="primary" icon="Plus" @click="createProduct">创建商品</el-button>
          <el-button icon="Refresh" @click="refreshData">刷新</el-button>
        </div>
        <div class="right-buttons">
          <el-button @click="drawerVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSelection">确认</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref,reactive, computed } from 'vue'

interface FormData {
  code: string
  warehouse: string
  inboundType: string
  supplier: string
  businessNo: string
  remark: string
}

interface GoodsItem {
  id: number
  name: string
  spec: string
  quantity: number
  price: number
}

interface Product {
  id: string
  name: string
  code: string
  brand?: string
  specName: string
  specCode: string
  price: number
  costPrice?: number
  netWeight: number
  grossWeight: number
  barcode?: string
  dimensions?: {
    length: number
    width: number
    height: number
  }
}

// 搜索参数类型
interface SearchParams {
  name: string
  code: string
  specName: string
  specCode: string
}

// 搜索参数
const searchParams = reactive<SearchParams>({
  name: '',
  code: '',
  specName: '',
  specCode: ''
})

// 抽屉控制
const drawerVisible = ref(false)
const searchKey = ref('')
const selectedProducts = ref<Product[]>([])

// 分页配置
const pagination = reactive({
  current: 1,
  size: 10,
  total: 21
})

// 模拟数据
const goodsData = ref<Product[]>([
  {
    id: '1',
    name: '小米空调',
    code: 'KT001',
    brand: '小米',
    specName: '2P',
    specCode: '2P',
    price: 3000.00,
    costPrice: 2500.00,
    netWeight: 5.2,
    grossWeight: 6.0,
    barcode: '1111',
    dimensions: { length: 80, width: 30, height: 50 }
  },
  {
    id: '2',
    name: '树山梨',
    code: 'SL002',
    specName: '大',
    specCode: 'L',
    price: 8.5,
    costPrice: 6.0,
    netWeight: 0.5,
    grossWeight: 0.7,
    dimensions: { length: 15, width: 15, height: 10 }
  },
  // 其他数据...
])

// 过滤后的商品数据
const filteredGoods = computed(() => {
  return goodsData.value.filter(item => 
    item.name.includes(searchKey.value) || 
    item.code.includes(searchKey.value)
  )
})

// 处理选择变化
const handleSelectionChange = (items: Product[]) => {
  selectedProducts.value = items
}

// 打开抽屉
const openDrawer = () => {
  drawerVisible.value = true
  refreshData()
}

// 刷新数据
const refreshData = () => {
  // 实际项目调用接口
  console.log('刷新数据...')
}


// 创建商品
const createProduct = () => {
  console.log('打开商品创建界面')
}

// 确认选择
const confirmSelection = () => {
  // 处理选中的商品
  drawerVisible.value = false
}

const form = reactive<FormData>({
  code: 'RK02279441',
  warehouse: '',
  inboundType: '生产入库',
  supplier: '',
  businessNo: '',
  remark: ''
})

const goodsList = reactive<GoodsItem[]>([])

const rules = {
  code: [{ required: true, message: '请输入入库单号', trigger: 'blur' }],
  warehouse: [{ required: true, message: '请选择仓库', trigger: 'change' }]
}

const totalQuantity = computed(() => {
  return goodsList.reduce((sum, item) => sum + item.quantity, 0)
})

const totalAmount = computed(() => {
  return goodsList.reduce((sum, item) => sum + (item.price * item.quantity), 0)
})


// 暴露打开方法给模板
defineExpose({ openDrawer })
</script>

<style scoped lang="scss">
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.card {
  margin-bottom: 20px;
}

.section-title {
  margin-bottom: 20px;
  color: #333;
}

.form-row {
  display: flex;
  gap: 40px;
}

.form-col {
  flex: 1;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.goods-table {
  margin-top: 15px;
}

.total-amount {
  font-size: 18px;
  color: #f56c6c;
  font-weight: 500;
}

.empty-text {
  color: #999;
  text-align: center;
  padding: 20px;
}

.action-buttons {
  text-align: right;
  margin-top: 20px;
}

.action-buttons .el-button {
  margin-left: 12px;
}

.demo-form :deep(.el-form-item) {
  margin-bottom: 18px;
}

.goods-drawer {
  --el-drawer-padding-primary: 20px;
  
  .el-drawer__header {
    margin-bottom: 15px;
  }
}

.drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-bar {
  margin-bottom: 20px;
}

.goods-info {
  .name {
    font-weight: 500;
    color: #333;
  }
  .brand, .code {
    font-size: 12px;
    color: #999;
  }
}

.spec-info {
  .barcode {
    font-size: 12px;
    color: #666;
  }
}

.price {
  color: #67c23a;
  font-weight: 500;
}
.cost-price {
  font-size: 12px;
  color: #999;
}

.pagination-wrapper {
  margin: 20px 0;
  display: flex;
  justify-content: flex-end;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-top: 1px solid #ebeef5;

  .right-buttons {
    .el-button:last-child {
      margin-left: 12px;
    }
  }
}

.el-table {
  margin: 15px 0;
  
  :deep(.cell) {
    line-height: 1.6;
  }
}
</style>